<template>
    <Page>
        <Topbar hideMenu />
        <Content>
            <Panel>
                <view class="left">
                </view>
                <view class="right">
                    <FormWrap>
                        <CheckBoxPanelGroup title="物料选择" v-model="list1" ref="checkboxPanelGroup" bodyHeight="64vh">
                            <template slot-scope="{ item, index }">
                                <FormWrap>
                                    <u--form labelPosition="left" :model="item" :rules="rules" :ref="`uForm${index}`"
                                        labelWidth="16rem">
                                        <u-form-item label="文本描述框">
                                            {{ item.field1 }}
                                        </u-form-item>
                                        <u-form-item label="文本描述框">
                                            {{ item.field1 }}
                                        </u-form-item>
                                        <u-form-item label="文本描述框">
                                            {{ item.field1 }}
                                        </u-form-item>
                                        <u-form-item label="文本描述框">
                                            {{ item.field1 }}
                                        </u-form-item>
                                        <u-form-item label="文本描述框">
                                            {{ item.field1 }}
                                        </u-form-item>
                                        <u-form-item label="文本描述框">
                                            {{ item.field1 }}
                                        </u-form-item>
                                        <u-form-item label="文本描述框">
                                            {{ item.field1 }}
                                        </u-form-item>
                                        <u-form-item label="文本描述框">
                                            {{ item.field1 }}
                                        </u-form-item>
                                        <u-form-item label="文本描述框">
                                            <InputField v-model="item.field1" />
                                        </u-form-item>
                                        <u-form-item label="文本描述框">
                                            <InputField v-model="item.field1" />
                                        </u-form-item>
                                        <u-form-item label="下拉选择框" prop="field2" required>
                                            <uni-data-select v-model="item.field2" :modelValue="item.field2"
                                                :localdata="list2" :clear="false" format="{label}"
                                                placeholder="请选择"></uni-data-select>
                                        </u-form-item>
                                        <u-form-item label="下拉选择框" prop="field2" required>
                                            <uni-data-select v-model="item.field2" :modelValue="item.field2"
                                                :localdata="list2" :clear="false" format="{label}"
                                                placeholder="请选择"></uni-data-select>
                                        </u-form-item>
                                        <u-form-item label="文本描述框">
                                            <InputField v-model="item.field1" />
                                        </u-form-item>
                                    </u--form>
                                </FormWrap>
                            </template>
                        </CheckBoxPanelGroup>
                        <view slot="footer">
                            <Button @click="click">提交</Button>
                        </view>
                    </FormWrap>
                </view>
            </Panel>
        </Content>
    </Page>
</template>

<script>
    import Page from "@/components/page/index.vue";
    import Content from "@/components/content/index.vue";
    import Topbar from "@/components/topbar/index.vue";
    import Panel from "@/components/panel/index.vue";
    import CheckBoxPanelGroup from '@/components/checkboxPanelGroup/index.vue';
    import FormWrap from "@/components/formWrap/index.vue";
    import InputField from '@/components/formField/inputField/index.vue';
    import Button from "@/components/button/index.vue";

    export default {
        components: {
            Page,
            Topbar,
            Content,
            Panel,
            CheckBoxPanelGroup,
            FormWrap,
            InputField,
            Button
        },
        data() {
            return {
                list1: [{
                    field1: '1',
                    field2: '选项1'
                }, {
                    field1: '2',
                    field2: '选项2'
                }, {
                    field1: '2',
                    field2: '选项2'
                }, {
                    field1: '2',
                    field2: '选项2'
                }, {
                    field1: '2',
                    field2: '选项2'
                }, {
                    field1: '2',
                    field2: '选项2'
                }, {
                    field1: '2',
                    field2: '选项2'
                }],
                list2: [{
                        label: '选项1',
                        value: '选项1', //uni-data-select的下拉数组必须有value
                    },
                    {
                        label: '选项2',
                        value: '选项2',
                    },
                    {
                        label: '选项3',
                        value: '选项3',
                    },
                    {
                        label: '选项4',
                        value: '选项4',
                    },
                    {
                        label: '选项5',
                        value: '选项5',
                    }
                ],
                rules: {
                    
                }
            }
        },
        methods: {
            click() {
                const selections = this.$refs['checkboxPanelGroup'].getSelections();
                console.log(selections);
            }
        },
    };
</script>

<style scoped lang="scss">
    .left {
        flex: 0 auto;
        width: 50rem;
        background: #f8f8fa;
    }

    .right {
        flex: 1;
        background: #fff;
        display: flex;
        flex-direction: column;
        padding: 0 4rem 2rem;

        /deep/ .form-wrap .body {
            padding-top: 0 !important;
            min-height: auto;
        }
    }
</style>